<template>
  <div class="share-page">
    <div class="top">
      <h5>我是<strong>{{girl.number}}</strong>号选手<strong>{{girl.nickName}}</strong></h5>
      <h5>为我助力</h5>
      <div class="logo"></div>
      <div class="qcode-wrap">
        <div id="qrcode"><img :src="qcodeUrl" /></div>
        <p>长按识别二维码查看详情</p>
      </div>
    </div>
    <div class="content">
      <div class="header">参赛宣言</div>
      <div class="body">
        <p>{{girl.declaration}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { callOcFun, decodeUnicode, getClientType } from '../libs/app'
import QRCode from 'qrcodejs2'

export default {
  name: 'Share',
  data () {
    return {
      id: 0,
      qcodeUrl: '',
      girl: {
        id: 0,
        number: '',
        nickName: '',
        declaration: ''
      }
    }
  },
  methods: {
    qrcode () {
      let qrcode = new QRCode('qrcode', {
        width: 230,
        height: 230,
        text: 'http://www.xiangchangshu.com/beauty/index.html#/detail'
      })
      console.log(qrcode)
    },
    queryQrcode () {
      let self = this
      this.$http.simplePost('/beautyPageantController/createShareQR', {shareUrl: `http://www.xiangchangshu.com/beauty/index.html#/detail/${this.girl.id}`, userId: this.girl.id}).then( function (data) {
        self.qcodeUrl = data        
      })
    },
    queryDetail () {
      this.girl = {}
      let self = this
      let params = {'beautyId': this.id}
      this.$http.simplePost('/beautyPageantController/getPlayerDetail', params).then( function (data) {
        self.girl.id = data.id
        self.girl.number = data.id
        self.girl.nickName = decodeUnicode(data.signName)
        self.girl.declaration = decodeUnicode(data.declaration)

        self.queryQrcode()
      })
    },
  },
  mounted () {
    // this.qrcode()
    debugger
    this.girl = this.$route.params.girl
    
    if(this.girl) {
      this.id = this.girl.id
      this.queryQrcode()
    } else {
      debugger
      let hash = window.location.hash
      let hashArr = hash.split('/')
      let hashArrLen = hashArr.length

      this.id = hashArr[hashArrLen - 1]
      this.queryDetail()

    }    
  }
}
</script>

<style scoped>
.share-page {
padding-bottom: 100px;
}
.share-page .top {
  position: relative;
  background-image: url(../../static/img/rules-top-bg.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  height: 1000px;
}
.share-page .top h5:first-child {
  padding-top: 200px;
  margin-bottom: 25px;
}
.share-page .top h5 {
  font-size: 38px;
  color: #fff;
}
.share-page .top h5 strong {
  color: #e9c943;
}
.share-page .top p {
  font-size: 28px;
  margin-top: 45px;
}
.share-page .top .sub-title {
  position: absolute;
  bottom: 90px;
  left: 0;
  right: 0;
  height: 113px;
  background-image: url(../../static/img/title-csbm.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.share-page .logo {
    position: absolute;
    top: 0;
    right: 40px;
    width: 105px;
    height: 133px;
    background-image: url(../../static/img/logo.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.share-page .qcode-wrap {
  margin-top: 100px;
}
.share-page #qrcode {
  width: 460px;
  height: 460px;
  margin: 0 auto;
  text-align: center;
  background-color: #fff;
}
.share-page #qrcode img {
  max-width: 100%;
}
.share-page .content {
  position: relative;
  /* top: -93px; */
}
.share-page .content .header {
  position: relative;
  top: 20px;
  height: 161px;
  line-height: 200px;
  align-items: center;
  background-image: url(../../static/img/subtitle-bg.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}
.share-page .content .body {
  box-sizing: border-box;
  background-color: #f1e1ff;
  width: 92%;
  margin: 0 auto;
  padding: 100px 45px 50px;
  color: #333;
  font-size: 26px;
  text-align: left;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.share-page .content .body h6 {
  font-weight: bold;
  margin-top: 50px;
  margin-bottom: 20px;
}
.share-page .content .body p {
  line-height: 60px;
}
</style>


